<template>
  <div id='app'>
    <div class="about">
<van-row>
  <van-col span="4">
   


<van-sidebar v-model="activeKey">
 <van-sidebar-item :title="c.name" v-for="(c,i) in listhedaer" :key="i" @click="filter(i)"/>
</van-sidebar>


  </van-col>
  <van-col span="18" offset="2">
    <!-- 轮播图 -->
    <div class="adds">
      <div>
 <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item><img src="/F1.jpg" alt=""></van-swipe-item>
  <van-swipe-item><img src="/F2.jpg" alt=""></van-swipe-item>
  <van-swipe-item><img src="/F3.jpg" alt=""></van-swipe-item>
</van-swipe>
      </div>

 
<ul>
  <li v-for="(c,i) in list" :key="i" @click="ClassificationDetails(c)">
    <img :src="c.icon" alt="">
    <p>{{c.name}}</p>
  </li>
</ul>



    </div>
 
    <!-- 轮播图 -->


  </van-col>
</van-row>

    </div>
   

  </div>
</template>

<script>
export default {
  data () {
    return {
      list: [],
      list2: [],
      activeKey:0,
      listhedaer:[
       ...this.$listAll.listhedaer
      ]
    }
  },
  methods: {
    get(){
      this.$request.category().then(res=>{
        console.log(res.data.data);
        this.list=res.data.data
        this.list2=res.data.data
      })
    },
    filter(i){
 
      this.list=this.list2.filter((res)=>{
            if(i==0){
           return  res
              }

              if(i==1){
                if(res.pid==15114||res.id==15114){
                  return res
                }
              }

               if(i==2){
                if(res.pid==15115||res.id==15115){
                  return res
                }
              }

                if(i==3){
                if(res.pid==15116||res.id==15116){
                  return res
                }
              }

                if(i==4){
                if(res.pid==15124||res.id==15124){
                  return res
                }
              }
        
        
         
      })

    },
    alllist(){
      this.list=this.list2
    },
    ClassificationDetails(c){
      this.$router.push({
        path:this.$routerConfig.ClassificationDetails.path,
        query:{icon:c.icon,name:c.name}
      })

    }

  },
  mounted() {
    this.get()

  },
  components: {

  }
}
</script>

<style lang='scss'>

.about{

}
.adds{
  width: 100%;
  height: 113px;
  display: flex;
  flex-direction: column;
  ul{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
  margin:  20px 0;

    li{
      width: 30%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin: 10px 1%;
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
  
 
}
.my-swipe{
  width: 100%;
  height: 100%;
  img{
    width: 100%;
    height: 100%;
    border-radius:10px ;
  }
}

</style>
